<template>
  <div class="btn-box">
    <div v-for="(item, index) in props.typeList" class="btn" :class="{ active: item.value == props.value, disabled: item.disabled }" :key="index" @click="changeType(item)">
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  //当前选择类型
  value: {
    type: Number,
    default: 0
  },
  //选择类型列表
  typeList: {
    type: Array,
    default: null
  }
})
const emit = defineEmits(['update:value', 'getData'])
const changeType = item => {
  if (item.disabled) return
  emit('update:value', item.value)
  emit('getData')
}
</script>

<style lang="scss" scoped>
.btn-box {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  .btn {
    padding: 0 17px;
    font-size: 14px;
    line-height: 30px;
    // background-color: rgba(#000, 0.04);
    background-color: #fff;
    color: #7f7f7f;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    & + .btn {
      border-left: none;
    }
    &.active {
      border: none;
      background-color: $mainColor;
      color: #fff;
    }
    &.disabled {
      cursor: not-allowed;
      background-color: rgba(#000, 0.04);
      color: #999;
    }
  }
}
</style>
